/***
全局主题样式设置
 */
$--color-white: #ffffff !default;
$--color-primary: #408eff !default;
$--color-primary-1: mix($--color-white, $--color-primary, 10%) !default;
$--color-primary-2: mix($--color-white, $--color-primary, 20%) !default;
$--color-primary-3: mix($--color-white, $--color-primary, 30%) !default;
$--color-primary-4: mix($--color-white, $--color-primary, 40%) !default;
$--color-primary-5: mix($--color-white, $--color-primary, 50%) !default;
$--color-primary-6: mix($--color-white, $--color-primary, 60%) !default;
$--color-primary-7: mix($--color-white, $--color-primary, 70%) !default;
$--color-primary-8: mix($--color-white, $--color-primary, 80%) !default;
$--color-primary-9: mix($--color-white, $--color-primary, 90%) !default;

:root {
    // 边框颜色
    --border-color: #e4e7ed;
    // 头部背景色
    --header-bg: #fff;
    // 顶栏设置内
    --header-setting-color: #606266;
    // 顶栏消息内
    --header-chat-bg-color: #f5f5f5;
    --header-drawer-layout: #ebeef5;
    --header-chat-text-color: #606266;
    // 顶栏搜索内
    --search-bg-primary: #408eff;
    --search-color-primary: #fff;
    // 菜单内
    --menu-bg-color: rgba(24, 145, 255, 0.8);
    --menu-active-text-color: #ddd;
    --menu-text-color: #fff;
    --menu-hover-bg-color: rgba(134, 192, 247, 1);
    // 面包屑
    --breadcrumb-hover-bg: rgba(134, 192, 247, 0.8);
    --breadcrumb-active-bg: rgba(24, 145, 255, 0.8);
    --breadcrumb-text-color: #606266;

    --pt-color-primary: #{$--color-primary};
    --pt-color-white: #{$--color-white};
    /* 主背景色 */
    --pt-main-bg: rgba(239, 232, 232, 0.6);

    /* 辅助色 */
    --pt-color-success: #67c23a; // Success
    --pt-color-warning: #e6a23c; // Warning
    --pt-color-danger: #f56c6c; // Danger
    --pt-color-info: #909399; // Info

    /* 无彩色 */
    --pt-color-text-primary: #303133; // 主要文本
    --pt-color-regular: #606266; // 普通文本
    --pt-color-secondary: #909399; // 次要文本
    --pt-color-placeholder: #c0c4cc; // 占位文本

    /* 主色辅助色 */
    --pt-color-primary-1: #{$--color-primary-1};
    --pt-color-primary-2: #{$--color-primary-2};
    --pt-color-primary-3: #{$--color-primary-3};
    --pt-color-primary-4: #{$--color-primary-4};
    --pt-color-primary-5: #{$--color-primary-5};
    --pt-color-primary-6: #{$--color-primary-6};
    --pt-color-primary-7: #{$--color-primary-7};
    --pt-color-primary-8: #{$--color-primary-8};
    --pt-color-primary-9: #{$--color-primary-9};

    /* search */
    --docsearch-key-gradient: rgba(125, 125, 125, 0.1);
    --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
        0 1px 2px 1px rgba(30, 35, 90, 0.4);
    --docsearch-muted-color: #909399;
    /* input文字颜色 */
    --docsearch-text-color: #606266;
    --docsearch-border-focus: var(--search-bg-primary);
    /* search footer */
    --docsearch-footer-background: #{$--color-white};
    --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);

    /*card颜色*/
    --docsearch-card-hover-bgColor: var(--search-bg-primary);
    --docsearch-card-hover-color: #{$--color-white};
    --docsearch-card-bgColor: var(--search-bg-primary);
    --docsearch-card-color: #{$--color-white};
    --docsearch-card-title: var(--search-bg-primary);
    // 头部drawer文字颜色
    --header-drawer-color: var(--header-setting-color);
    // 头部抽屉布局样式背景
    --header-drawer-layout-bg: var(--header-drawer-layout);
    // 头部消息颜色
    --header-chat-bg: var(--header-chat-bg-color);
    // 头部消息文字颜色
    --header-chat-color: var(--header-chat-text-color);
}

// 暗黑模式下的样式
html.dark {
    // 边框颜色
    --border-color: #414243;
    // 头部背景色
    --header-bg: #141414;
    // 顶栏设置内
    --header-setting-color: #ddd;
    // 顶栏消息内
    --header-chat-bg-color: #141414;
    --header-drawer-layout: #393b3f;
    --header-chat-text-color: #ddd;
    // 顶栏搜索内
    --docsearch-footer-background: #141414;
    --docsearch-footer-shadow: 0 -1px 0 0 #b5b0b0, 0 -3px 6px 0 rgba(169, 176, 189, 0.12);
    --search-bg-primary: #656a71;
    // 面包屑
    --breadcrumb-hover-bg: rgba(134, 193, 247, 1);
    --breadcrumb-active-bg: rgba(24, 145, 255, 0.8);
    --breadcrumb-text-color: #fff;
    // 头部抽屉文字颜色
    --header-drawer-color: var(--header-setting-color);
    // 头部抽屉布局样式背景
    --header-drawer-layout-bg: var(--header-drawer-layout);
    // 头部消息颜色
    --header-chat-bg: var(--header-chat-bg-color);
    // 头部消息文字颜色
    --header-chat-color: var(--header-chat-text-color);
    // 菜单内
    --menu-bg-color: #141414;
    --menu-active-text-color: #fff;
    --menu-text-color: #ddd;
    --menu-hover-bg-color: rgba(84, 89, 94, 0.8);
}
